$(function(){
    //查询方法
    function selweather(zty){
        $.ajax({
            url:zty,
            type:"GET",
            success:function(data){
                console.log(data);
                var html="";
                $.each(data.newslist,function (index,item) {
                    html +=`
                    <div class="weather-card">
                        <div class="up"><img src="image/${item.weatherimg}" alt=""></div>
                        <div class="down">
                            <h2>${item.area}</h2>
                            <div>时间：${item.date}  ${item.week}</div>
                            <div>天气：${item.weather}</div>
                            <h1>${item.real}</h1>
                            <div>${item.lowest}~${item.highest}</div>
                            <div>风向：${item.wind}  ${item.winddeg}度</div>
                            <div>风速：${item.windspeed}km/h 风力：${item.windsc}</div>
                            <div>日出时间：${item.sunrise}————${item.sunset}:日落时间</div>
                            <div>月升时间：${item.moonrise}————${item.moondown}:月落时间</div>
                            <div>降雨量：${item.pcpn}</div>
                            <div>降雨概率：${item.pop}</div>
                            <div>紫外线强度指数：${item.uv_index}</div>
                            <div>能见度：${item.vis}公里</div>
                            <div>相对湿度：${item.humidity}</div>
                            <h3>生活指数提示：</h3>
                            <span>${item.tips}<span>
                        </div>
                    </div>
                    `
                });
                //将内容替换成查询板内容
                $(".container").html("");
                $(".container").append(html);
            },
            error:function(){
                alert("出错了");
            },
            dataType:"json"
        });
    }
    

    var z=0;
    //点击弹出天气预报
    $(".weatherlog").click(function(){
        if(z==0){
            $(".weather").css("display","block");
            $(".weatherlog").html("<img src='image/叉叉.png' alt=''>");
            z++;
        }
        else{
            $(".weather").css("display","none");
            $(".weatherlog").html("<img src='image/多云.png' alt=''>")
            z--;
        }
    })

    //点击弹出搜索板块
    $(".tabadd").click(function(){
        $(".select").css("display","block");
    })

    //点击搜索，内容浏览，并获取当前查询的城市
    var city="";
    $(".swb").click(function(){
        if($(".swi").val()!=""){
            city=$(".swi").val();
            $(".container").html("");
            selweather("http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city="+$(".swi").val()+"市");
        }
    })
    
    //点击关闭搜索板
    $(".noadd-close").click(function(){
        $(".select").css("display","none");
        $(".swi").val("");
    })

    //点击将搜索内容添加至tab板中，并关闭搜索板
    $(".add").click(function(){
        if($(".container").html()!=""){
            $.ajax({
            url:"http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city="+city+"市",
            type:"GET",
            success:function(data){
                console.log(data);
                var html="";
                $.each(data.newslist,function (index,item) {
                    html +=`
                    <div class="weather-card">
                        <div class="up"><img src="image/${item.weatherimg}" alt=""></div>
                        <div class="down">
                            <h2>${item.area}</h2>
                            <div>时间：${item.date}  ${item.week}</div>
                            <div>天气：${item.weather}</div>
                            <h1>${item.real}</h1>
                            <div>${item.lowest}~${item.highest}</div>
                            <div>风向：${item.wind}  ${item.winddeg}度</div>
                            <div>风速：${item.windspeed}km/h 风力：${item.windsc}</div>
                            <div>日出时间：${item.sunrise}————${item.sunset}:日落时间</div>
                            <div>月升时间：${item.moonrise}————${item.moondown}:月落时间</div>
                            <div>降雨量：${item.pcpn}</div>
                            <div>降雨概率：${item.pop}</div>
                            <div>紫外线强度指数：${item.uv_index}</div>
                            <div>能见度：${item.vis}公里</div>
                            <div>相对湿度：${item.humidity}</div>
                            <h3>生活指数提示：</h3>
                            <span>${item.tips}<span>
                        </div>
                    </div>
                    `
                });
                var y=0;
                for(var t=0;t<$(".tabscon section").length;t++){
                    if($(".tabscon section").eq(t).children().eq(0).children().eq(1).children().eq(0).text()==city){
                        y++;
                    }
                }
                if(y==0){
                    $(".conactive").html("").append(html);
                    $(".liactive span").eq(0).text(city);
                    $(".select").css("display","none");
                }
                else{
                    alert("该城市已存在，请添加其他城市");
                }
            },
            error:function(){
                alert("出错了");
            },
            dataType:"json"
        });
        }
    })
})